How do you render a list of items with {#each}?
In Svelte, the {#each} block is used to loop through an array or list and render a block of HTML for each item. This works similarly to the map() method in JavaScript but is written directly in the component template.
Key Rules for {#each} Blocks
{#each array as item}starts the loop and repeats the block for each element in the array.{#each array as item, index}gives you access to both the item and its index in the list.{/each}is required to close the loop block.You can include an
{:else}block to display a message if the array is empty.
Basic Syntax
This example loops through the fruits array and renders each fruit inside a list item.
Example with Index and Empty State
Here, the {:else} block renders a fallback message when the tasks array is empty, and the index i is used to display numbered items.